<template>
  <z-paging ref="paging" v-model="state.chatList" refresher-enabled @query="getBeeperWechat">
    <view>
      <van-cell-group>
        <van-cell center v-for="(item, index) in state.chatList" :key="index">
          <view slot="title">
            <van-field :border="false" :value="item.chatName" placeholder="请设置昵称" @change="setInputName($event, item)" :disabled="item.flag ? false : true" />
          </view>
          <i :class="[item.flag === true ? 'i-iconoir:security-pass' : 'i-bx:edit', 'c-color w-6 h-6 mr-3']" @click="editUser(item)"></i>
          <i class="i-material-symbols:delete-outline c-red-6 w-6 h-6" @click="delUser(item)"></i>
        </van-cell>
      </van-cell-group>
    </view>
    <view class="fixed w-full c-pd" :style="{ bottom: `${store.$state.systemInfo.safeAreaInsets!.bottom}px` }">
      <van-button type="primary" block open-type="share" @click="inviteFriends">邀请好友</van-button>
    </view>
  </z-paging>
</template>

<script setup lang="ts">
import { useAppStore } from '@/store';
import EquipRequest from '@/request/equipRequest';
import useModal from '@/hooks/useModal';
import useToast from '@/hooks/useToast';
import useShare from '@/hooks/useShare';
import Tools from '@/utils/tools';

interface IChatObj {
  id: number;
  flag: boolean;
  chatName: string;
  chatBeeperId: number;
}

interface IState {
  type: number;
  chatList: IChatObj[];
  beeperId: number;
}

const store = useAppStore();

const { showModal } = useModal();

const { showToast } = useToast();

const { onShareAppMessage } = useShare();

const state = reactive<IState>({ type: 0, chatList: [], beeperId: store.$state.beeperId });

const paging = ref();

onLoad(() => {
  getBeeperWechat();
});

const setInputName = (e: any, item: IChatObj) => {
  item.chatName = e.detail;
};

const getBeeperWechat = () => {
  EquipRequest.GetChatList({ beeperId: state.beeperId, hasLoading: true })
    .then((res) => {
      if (res.status === 0) {
        state.chatList = res.data.map((item) => {
          return {
            chatName: item.chatName,
            id: item.id,
            flag: false,
            chatBeeperId: item.chatBeeperId,
          };
        });
        paging.value.complete(state.chatList);
      }
    })
    .catch((err) => {
      paging.value.complete(false);
    });
  state.chatList = [];
};

const editUser = (item: IChatObj) => {
  if (item.flag) {
    EquipRequest.EditMicroChatFriend({
      beeperId: state.beeperId,
      defaultFlag: 0,
      chatName: item.chatName,
      chatBeeperId: item.chatBeeperId,
      id: item.id,
    }).then((res) => {
      if (res.status === 0) {
        showToast('操作成功！', 'success');
        setTimeout(() => {
          getBeeperWechat();
        }, 1000);
      }
    });
  }
  item.flag = !item.flag;
};

const delUser = (item: IChatObj) => {
  showModal('确定要删除该好友吗？', {
    showCancel: true,
    success: async (res) => {
      if (res.confirm) {
        EquipRequest.DelMicroChatFriend({
          beeperId: state.beeperId,
          chatBeeperId: item.chatBeeperId,
          id: item.id,
        }).then((res) => {
          if (res.status === 0) {
            showToast('操作成功！', 'success');
            setTimeout(() => {
              getBeeperWechat();
            }, 1000);
          }
        });
      }
    },
  });
};

/**
 * 用户点击右上角分享
 */
const inviteFriends = () => {
  let startTime = Tools.formatTimestamp(new Date().getTime());
  return {
    title: '快来成为微聊好友',
    path: `/subcontract/equipment/addressBook/addFriendShare?beeperId=${state.beeperId}&startTime=${startTime}`,
    imageUrl: 'https://pic.kanglailab.com/common/beeper.png',
  };
};

onShareAppMessage(inviteFriends());
</script>
